<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold">{{ $t("page.navbar.promotions") }}</h1>
        <van-icon class="cursor-pointer close-icon" @click="backPage" name="cross" />
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 md:mb-0 rounded text-sm">
          <button v-for="(items, index) in main.active_list" @click="clickActiveTab(items)"
            :class="activeTab == 'tab' + items.id ? 'active-tab' : ''"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white">
            {{ items.title }}
          </button>
          <!-- 自定义 -->
          <button v-for="(items, index) in customizeActiveData" @click="clickCustomizeActiveTab(items)"
            :class="activeTab == items.query.tab ? 'active-tab' : ''"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white">
            {{ items.title }}
          </button>
          <!-- <button
            @click="
              activeTab = 'tab10';
              tabSelected = 'tab10';
            "
            :class="{
              'active-tab': activeTab === 'tab10',
              '': activeTab !== 'tab10'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            状态活动
          </button> -->
        </div>
        <!-- 手机模式 -->
        <!-- <select class="sidebar-2 bg-[#0f212e] p-4 mb-2 rounded" v-model="tabSelected" @change="selectChange">
          <option :value="item.valueKey" v-for="(item, index) in phoneMenu">
            {{ item.title }}
          </option>
        </select> -->
        <div class="sidebar-2 bg-[#0f212e] p-4 mb-2 rounded">
          <el-select v-model="tabSelected" @change="selectChange" popper-class="mySelectStyle">
            <el-option
              v-for="(item, index) in phoneMenu"
              :label="item.title"
              :value="item.valueKey"
              :key="item.valueKey"
            />
          </el-select>
        </div>
        <div class="content w-full bg-[#0f212e] p-4 rounded-md">
          <div>
            <div v-if="
              ['tab6', 'tab7', 'tab8', 'tab9', 'tab10', 'tab11'].includes(
                activeTab
              )
            ">
              <div class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]">
                <div class="flex w-full flex-col items-center">
                  <!-- <img
                    v-if="
                      activeObj &&
                      activeObj?.active_image_url &&
                      activeObj?.active_image_url.length
                    "
                    class="mb-[6px] w-full"
                    alt="A trophy illustration"
                    :src="imgUrls"
                  /> -->
                  <van-image v-show="activeObj &&
                    activeObj?.active_image_url &&
                    activeObj?.active_image_url.length" class="mb-[6px] w-full bg-[#0f212e]" :src="imgUrls">
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                  </van-image>
                </div>
                <div class="mt-4">
                  <div class="text-sm text-gray-400" v-if="
                    activeTab == 'tab7' && activeObj && activeObj.start_time
                  " v-show="typeTime === 'range'">
                    {{ dataTime.start_time }} —
                    {{ dataTime.end_time }}
                  </div>
                  <div class="flex justify-between p-4 rounded-md bg-[#1a2c38]" v-if="isLogin && activeTab == 'tab7'"
                    v-show="typeTime === 'range'">
                    <div v-if="activeObj">
                      {{ $t("page.maneuver.accumulatedRecharge") }}
                      {{ activeObj.amount }}
                    </div>
                    <div class="bg-[#1890ff] rounded-md px-[4px] text-[#fff] py-[4px] text-[12px]" @click="clickWallet">
                      {{ $t("page.maneuver.goRecharge") }}
                    </div>
                  </div>
                  <h1 class="text-xl font-bold mt-2" v-if="activeTab == 'tab6'">
                    {{ $t("page.maneuver.rechargeDday") }}
                  </h1>
                  <h1 class="text-xl font-bold mt-2 flex flex-col gap-1" v-if="activeTab == 'tab8'">
                    <span class="text-sm text-gray-400" v-show="typeTime === 'range'">{{
                      $t("page.maneuver.ActivityTime") }}：
                      {{ dataTime.start_time }} — {{ dataTime.end_time }}</span>
                    <div class="flex w-full justify-between items-center mb-2">
                      <span class="text-sm text-gray-400">{{ $t("page.return_water.win_loss") }}:{{
                        resDetail?.amount
                      }}</span>
                      <span class="text-[#1890ff]"><el-button type="primary" size="default"
                          @click="router.push('/casino')">{{
                            $t("page.active.go_betting") }}</el-button>
                      </span>
                    </div>
                    {{ $t("page.return_water.title") }}
                  </h1>
                  <h1 class="text-xl font-bold mt-2 flex flex-col gap-1" v-if="activeTab == 'tab9'">
                    <span class="text-sm text-gray-400" v-show="typeTime === 'range'">{{
                      $t("page.maneuver.ActivityTime") }}：
                      {{ dataTime.start_time }} — {{ dataTime.end_time }}</span>
                    {{ $t("page.first_recharge.title") }}
                  </h1>
                  <h1 class="text-xl font-bold mt-2 flex flex-col gap-1" v-if="activeTab == 'tab10'">
                    <span class="text-sm text-gray-400" v-show="typeTime === 'range'">{{
                      $t("page.maneuver.ActivityTime") }}：
                      {{ dataTime.start_time }} — {{ dataTime.end_time }}</span>
                    <div class="flex w-full justify-between items-center mb-2 lucky-tip">
                      <span class="text-sm text-gray-400">{{ $t("page.lucky.my_lucky") }}:{{ luckyValue }}</span>
                      <div class="text-[#1890ff]">
                        <el-button type="primary" size="small" @click="router.push('/casino')">{{
                          $t("page.active.go_betting")
                        }}</el-button>
                        <el-button type="primary" size="small" @click="toggle" v-if="main.isLogin">{{ $t("page.lucky.record") }}</el-button>
                        <recordDialog :open="boolean" @close="toggle" />
                      </div>
                    </div>
                    {{ $t("page.lucky.title") }}
                  </h1>
                  <!-- 金币兑换码 -->
                  <h1 class="text-xl font-bold mt-2 flex flex-col gap-1" v-if="activeTab == 'tab11'">
                    <span class="text-sm text-gray-400" v-show="typeTime === 'range'">{{
                      $t("page.maneuver.ActivityTime") }}：
                      {{ dataTime.start_time }} — {{ dataTime.end_time }}</span>
                    <div class="flex w-full mb-2">
                      <ReInput v-model="code" :prefixName="$t('page.code.input_code')" @confirm="codeConfirm" />
                    </div>
                  </h1>
                  <h1 class="text-xl font-bold mt-2" v-if="activeTab == 'tab7'">
                    {{ $t("page.maneuver.rechargeRange") }}
                  </h1>

                  <div class="relative flex flex-col gap-8" v-if="activeTab == 'tab9' && activeTabPathTab9.length">
                    <template v-if="activeTab == 'tab9'">
                      <!-- <activeTable
                        v-for="(item, index) in activeTabPath"
                        :key="index"
                        :activeTabPath="activeTabPath[index]"
                        :columns="columns[index]"
                        :activeTab="activeTab"
                        :isMerge="false"
                      >
                      </activeTable> -->

                      <activeTable :activeTabPath="activeTabPathTab9" :columns="columns1" :activeTab="activeTab"
                        :isMerge="false">
                      </activeTable>
                      <activeTable :activeTabPath="activeTabPathTab91" :columns="columns2" :activeTab="activeTab"
                        :isMerge="false">
                      </activeTable>
                    </template>
                  </div>
                  <div v-if="activeTab == 'tab10'" class="flex flex-col">
                    <div class="flex w-full justify-center ">
                      <van-notice-bar class="w-2/4 van-notice-bar" :scrollable="true" :color="'#fff'"
                        :background="'#0f212e'" :wrapable="false" left-icon="volume-o" :text="noticeList" />
                    </div>
                    <div class="flex justify-center items-center">
                      <LuckyWheel ref="myLucky" width="320px" height="320px" :defaultConfig="defaultConfig"
                        :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback"
                        @end="endCallback" />
                    </div>
                    <div class="flex items-center btnFlex">
                      <el-button v-for="(item, index) in activeTabs" :key="index" :type="index + 1 == activeTypeShow ? 'primary' : 'default'
                        " size="default" @click="activeTypeHandle(item)">{{ item.name }}</el-button>
                    </div>
                  </div>
                  <div class="relative" v-else>
                    <activeTable v-show="activeTab == 'tab6' ||
                      activeTab == 'tab7' ||
                      activeTab == 'tab8'
                      " :activeTabPath="activeTabPath" :columns="columns" :activeTab="activeTab"
                      :isMerge="activeTab != 'tab8'">
                    </activeTable>
                  </div>
                  <p class="mt-2 leading-relaxed" v-if="activeObj">
                  <div v-html="activeObj.brief" class="img_auto"></div>
                  </p>
                </div>
              </div>
            </div>
            <!-- 自定义 -->
            <div v-else class="text-[#fff]">
              <clickCustomizeActive :activeItem="customizeActiveItem" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <prizeResultDialog :open="prizeBol" @close="handleCLose" :data="prizeResultData" />
  </div>

</template>
<script setup>
import {
  reactive,
  ref,
  computed,
  onMounted,
  watch,
  nextTick,
  getCurrentInstance,
  defineAsyncComponent
} from "vue";
import recordDialog from "./components/recordDialog.vue";
import clickCustomizeActive from "./components/clickCustomizeActive.vue";
import { useRoute, useRouter } from "vue-router";
import { mainAct } from "@/store/activeda";
import { activeBrief, getActiveCustomizeView } from "../../api/active.js";
import activeTable from "../components/activeTable.vue";
import { mainWallet } from "@/store/wallet";
import { dateTimeZone } from "../../utils/date";
import { storeToRefs } from "pinia";
import { LuckyWheel } from "@lucky-canvas/vue";
import ReInput from "./components/reInput.vue";
import prizeResultDialog from "./components/prizeResultDialog.vue";
import { ElMessage } from "element-plus";


import { useBoolean } from "@/hooks/useBoolean.js";
import { showNotify } from 'vant';

const { boolean, toggle } = useBoolean();
const { boolean: prizeBol, toggle: prizeToggle } = useBoolean();

const activeTab = ref("tab1");
const route = useRoute();
const router = useRouter();
const main = mainAct();
const main2 = mainWallet();
const { isLogin } = storeToRefs(main); //响应式
const handleCLose = () => {
  if (prizeResultData.value && prizeResultData.value.type == "again") {
    startCallback();
  }
  prizeToggle();
};
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
import { activeWheelRecord } from "@/api/active";
const noticeList = ref('');
watch(
  () => route.query.tab,
  async (newVal) => {
    if (!newVal) return
    let query = route.query.tab;
    activeTab.value = query;
    tabSelected.value = query;
    await menu().getActiveCustomizeViewData();
    if (query?.includes("active")) {
      const find = menu().getCustomeMenu.find(item => item.query.tab == query);

      console.log("find", find);

      clickCustomizeActiveTab(find);
    } else {
      clickActiveTab(false);
    }
  }
);

let phoneMenu = ref([]);
onMounted(async () => {

  //query
  let query = route.query.tab;
  if (query) {
    activeTab.value = query;
    console.log('queryqueryqueryquer=======query', query);
    tabSelected.value = query;
    await menu().getActiveCustomizeViewData();
    if (query?.includes("active")) {
      const find = menu().getCustomeMenu.find(item => item.query.tab == query);
      console.log(
        "menu().getCustomeMenu",
        menu().getCustomeMenu,
        query,
        menu().getCustomeMenu.find(item => item.query.tab == query)
      );
      clickCustomizeActiveTab(find);
    } else {
      clickActiveTab(false);
    }

    nextTick(() => {
      phoneMenu.value = []
      main.active_list.forEach(items => {
        items.valueKey = 'tab' + items.id
        phoneMenu.value.push(items)
      })
      menuStore.getCustomeMenu.forEach(items => {
        items.valueKey = items.query.tab
        phoneMenu.value.push(items)
      })
    })
  }
  loadNoticeList();
});

// 处理 prizes 信息
const setPrizes = (type, value) => {
  console.log('type, value****------', type, value);
  const obj = {
    luck: `${globalProperties
      .$t("page.lucky.lucky_value")
      .replace("*", value)}`,
    again: `${globalProperties.$t("page.lucky.again")}`,
    coins: `${globalProperties
      .$t("page.lucky.coins_value")
      .replace("*", value)}`,
    none: `${globalProperties.$t("page.lucky.none")}`
  };
  return obj[type];
};


const loadNoticeList = () => {
  const typeMap = {
    silver: globalProperties.$t("page.wheel.silver"),
    prime: globalProperties.$t("page.wheel.prime"),
    diamond: globalProperties.$t("page.wheel.diamond")
  };

  const lang = localStorage.getItem("lang");

  activeWheelRecord({ is_my: 0, page: 1, page_size: 10 }).then(res => {
    res.data.list.filter(item => item.prizes_type !== 'none').forEach(item => {
      const text = lang == "en"
        ? `${item.user_name} in ${typeMap[item.title]} ${setPrizes(item.prizes_type, item.prizes)}`
        : `${item.user_name} 在 ${typeMap[item.title]} 中获得 ${setPrizes(item.prizes_type, item.prizes)}`;

      // 如果已经存在通知，拼接分号
      if (noticeList.value) {
        noticeList.value += '; ';
      }

      // 添加新的通知文本
      noticeList.value += text;

      // 确保最多 20 条通知
      const notices = noticeList.value.split(';').filter(Boolean); // 分割并去除空项
      if (notices.length > 20) {
        notices.shift(); // 移除最早的通知
      }

      // 更新 noticeList.value，拼接回去，最后一个不需要分号
      noticeList.value = notices.join('; ') + (notices.length ? ';' : '');
    });

    console.log('noticeList.value-----', noticeList.value);
  });
};

const dataTime = reactive({
  start_time: "",
  end_time: ""
});

const luckyValue = ref(0);
const walletShow = ref(false);
const clickWallet = async () => {
  // await main2.getBalanceNumll();
  // walletShow.value = true;
  main2.getBankInfo('showRecharge');
};
import { activeExchange } from "@/api/active";
const code = ref("");
const codeConfirm = () => {
  if(!code.value.length) return ElMessage({
          type: "error",
          showClose: true,
          message:  `${globalProperties.$t("page.code.input_code")}`
        })
  if (!main.isLogin) {
    main.showLoginLayer();
    return;
  }
  const params = {
    redeem_code: code.value
  };

  activeExchange(params).then(res => {
    if (res.errno == 0) {
      let str = `${globalProperties.$t("page.convert.success")}${res.data.coins
          }${globalProperties.$t("layer.register.gold")}`
          ElNotification({
          type: "success",
          showClose: true,
          message: str
        })
    } 
  });
};

const walletClose = () => {
  walletShow.value = false;
};

const columns = ref();
const columns1 = ref([
  {
    prop: "reward_condition",
    label: "page.first_recharge.money",
    align: "center",
    width: 80
  },
  {
    prop: "value",
    label: "page.first_recharge.amount",
    align: "center",
    width: 80
  }
]);
const columns2 = ref([
  {
    prop: "reward_condition",
    label: "page.second_recharge.money",
    align: "center",
    width: 80
  },
  {
    prop: "value",
    label: "page.first_recharge.amount",
    align: "center",
    width: 80
  }
]);

const clickActiveTab = item => {
  if (item) {
    activeTab.value = "tab" + item.id;
    tabSelected.value = "tab" + item.id;
  }
  console.log("activeTab.value", activeTab.value);

  let arr = [];
  columns.value = [];
  switch (activeTab.value) {
    case "tab6":
      arr = [
        {
          prop: "name",
          label: "page.vip.level",
          align: "center",
          width: 80
        },
        {
          prop: "reward_condition",
          label: "page.vip.evenyCumulativeAmount",
          align: "center",
          width: 80
        },
        {
          prop: "value",
          label: "page.vip.bonusGold",
          align: "center",
          width: 80
        }
      ];
      break;
    case "tab7":
      arr = [
        {
          prop: "name",
          label: "page.vip.level",
          align: "center",
          width: 80
        },
        {
          prop: "reward_condition",
          label: "page.vip.cumulativeAmount",
          align: "center",
          width: 80
        },
        {
          prop: "value",
          label: "page.vip.bonusGold",
          align: "center",
          width: 80
        }
      ];
      break;
    case "tab8":
      arr = [
        {
          prop: "name",
          label: "page.vip.level",
          align: "center",
          width: 80
        },
        {
          prop: "reward_condition",
          label: "page.return_water.gold",
          align: "center",
          width: 80
        },
        {
          prop: "value",
          label: "page.return_water.return",
          align: "center",
          width: 80
        }
      ];
      break;
    case "tab9":
      arr = [
        [
          {
            prop: "reward_condition",
            label: "page.first_recharge.money",
            align: "center",
            width: 80
          },
          {
            prop: "value",
            label: "page.first_recharge.amount",
            align: "center",
            width: 80
          }
        ],
        [
          {
            prop: "reward_condition",
            label: "page.second_recharge.money",
            align: "center",
            width: 80
          },
          {
            prop: "value",
            label: "page.first_recharge.amount",
            align: "center",
            width: 80
          }
        ]
      ];
      break;
  }
  columns.value = arr;

  getActive();
};

const customizeActiveItem = ref();
const clickCustomizeActiveTab = item => {
  activeTab.value = item.query.tab;
  customizeActiveItem.value = item;
};

const tab9Data = ref([]);
const activeTabPath = ref([]);
const activeTabPathTab9 = ref([]);
const activeTabPathTab91 = ref([]);
const activeObj = ref();
const imgUrls = ref();
const tableDataArr = ref([]);
const typeTime = ref("");
const activeType = ref("");
const activeTabs = ref([
  {
    tab: "silver",
    name: globalProperties.$t("page.wheel.silver"),
    value: 1
  },
  {
    tab: "prime",
    name: globalProperties.$t("page.wheel.prime"),
    value: 2
  },
  {
    tab: "diamond",
    name: globalProperties.$t("page.wheel.diamond"),
    value: 3
  }
]);
const activeTypeShow = ref(1);
const resDetail = ref();
const activeTypeHandle = item => {
  activeType.value = item.tab;
  activeTypeShow.value = item.value;
  updatePrizes(item.value - 1);
};
const getActive = async () => {
  imgUrls.value = "";

  let key = "recharge_by_day";
  switch (activeTab.value) {
    case "tab6":
      key = "recharge_by_day"; // 每日充值
      break;
    case "tab7":
      key = "recharge_by_range"; // 累计充值活动
      break;
    case "tab8":
      key = "bet_return_water"; // 投注返水
      break;
    case "tab9": // 首存活动
      key = "first_recharge";
      break;
    case "tab10": // 转盘抽奖
      key = "spin_wheel";
      break;
    case "tab11": // 金币兑换码
      key = "redeem_code";
      break;
  }
  tabSelected.value = activeTab.value;

  let res = await activeBrief({ key: key });
  resDetail.value = res.data.detail;
  if (res.errno == 0) {
    typeTime.value = res.data.detail?.time?.type;

    activeObj.value = res.data.detail;
    if (res.data?.detail?.time?.data) {
      dataTime.start_time = dateTimeZone(
        res.data.detail.time.data.start_at,
        "{y}-{m}-{d}",
        main.timeZone
      );
      dataTime.end_time = dateTimeZone(
        res.data.detail.time.data.end_at,
        "{y}-{m}-{d}",
        main.timeZone
      );
    } else {
      if (res.data?.detail?.start_time) {
        dataTime.start_time = dateTimeZone(
          res.data.detail.start_time,
          "{y}-{m}-{d}",
          main.timeZone
        );
        dataTime.end_time = dateTimeZone(
          res.data.detail.end_time,
          "{y}-{m}-{d} {h}:{i}:{s}",
          main.timeZone
        );
      } else {
        dataTime.start_time = "";
        dataTime.end_time = "";
      }
    }

    if (
      res.data.detail?.active_image_url &&
      res.data.detail?.active_image_url.length
    ) {
      imgUrls.value = main.static_base_url + res.data.detail?.active_image_url;
    }

    let ruleData = res.data.detail.rule;
    tab9Data.value = ruleData;

    if (ruleData && ruleData.length) {
      activeTabPath.value = [];

      if (key == "recharge_by_range" || key == "recharge_by_day") {
        ruleData.forEach(item => {
          item.data.forEach(dataEntry => {
            const levelNames = item.level
              .map(level => `vip${level}`)
              .join(", ");
            const length = item.level.length;

            activeTabPath.value.push({
              name: levelNames,
              length: length, // 注意这里修正了属性名为 length
              dataLength: item.data.length, // 注意这里修正了属性名为 length
              reward_condition: dataEntry.reward_condition,
              value: dataEntry.value
            });
          });
        });
      }
    }
    if (key == "recharge_by_single") {
      tableDataArr.value = [];
      if (ruleData && ruleData.length) {
        ruleData.forEach(items => {
          let str = "";

          if (items.max_value) {
            str = `${globalProperties.$t("layer.recharge.proportions")}${items.reward
              }%,${globalProperties.$t("layer.recharge.most")}${items.max_value
              }${globalProperties.$t("layer.register.gold")}`;
          } else {
            str =
              globalProperties.$t("layer.recharge.goldNumber") +
              items.reward +
              globalProperties.$t("layer.register.gold");
          }
          tableDataArr.value.push({
            provider_name: items.provider_name,
            reward: str
          });
        });
      }
    }

    if (key == "first_recharge") {
      activeTabPath.value = [];
      activeTabPathTab9.value = [];
      activeTabPathTab91.value = [];

      if (ruleData && ruleData.length) {
        ruleData.forEach(item => {
          // 把item.reward_list的数组添加到activeTabPath中
          const res = item.reward_list.map(dataEntry => {
            return {
              reward_condition: `${dataEntry.data.reward_condition_min}-${dataEntry.data.reward_condition_max}`,
              value:
                dataEntry.type === "rate"
                  ? `${dataEntry.data.value}%`
                  : dataEntry.data.value
            };
          });
          activeTabPath.value.push(res);
        });

        activeTabPathTab9.value = activeTabPath.value[0];
        activeTabPathTab91.value = activeTabPath.value[1];
      }
    }

    if (key == "bet_return_water") {
      activeTabPath.value = [];
      ruleData?.forEach(item => {
        const levelNames = item.level.map(level => `vip${level}`).join(", ");

        const res = item.data.map(dataEntry => {
          return {
            name: levelNames,
            reward_condition: dataEntry.reward_condition,
            value: `${globalProperties.$t("page.return_water.proportion")}${dataEntry.value
              }%,${globalProperties.$t("page.return_water.max_reward")}${dataEntry.max_value
              }${globalProperties.$t("layer.register.gold")}`
          };
        });
        console.log("回水比例10=======================res", res);

        activeTabPath.value.push(res[0]);
      });
    }

    if (key == "spin_wheel") {
      // 更新奖品
      luckyValue.value = res.data.detail.lucky_value;
      updatePrizes(activeTypeShow.value - 1);
    }

    if (key == "redeem_code") {
    }
  }
};
import { prezesMap } from "./prizes.js";
const currentData = ref([]);
const myLucky = ref();

const defaultConfig = computed(() => {
  return {
    offsetDegree: 100
  };
});
import { pointerMap, buttonsMap, blocksMap } from "./prizes.js";
const updatePrizes = index => {
  rewardData.value = {};
  currentData.value = tab9Data.value[index].reward_list;
  const colors = ["#283130", "#b13020", "#3a7531", "#20519a", "#a92f97"];

  blocks.value = [
    {
      padding: index == 2 ? "50px" : "28px",
      imgs: [
        {
          src: blocksMap[index],
          width: "280px",
          height: "280px",
          top: index == 1 ? "21px" : "20px"
        }
      ]
    }
  ];

  buttons.value = [
    {
      radius: "30%",
      imgs: [
        {
          src: buttonsMap[index],
          width: "100px",
          height: "100px",
          top: "-50px"
        }
      ]
    },
    {
      imgs: [
        { src: pointerMap[index], width: "25px", height: "45px", top: "-150px" }
      ]
    }
  ];
  prizes.value = currentData.value.map((item, i) => {

    const fontsText = item.type == 'again' ? '' : `x${item.data.value || 1}`;
    return {
      background: colors[i % 3],
      fonts: [
        {
          text: fontsText,
          fontColor: "#fff",
          top: index == 2 ? "5px" : fontTop,
          fontSize: fontSize
        }
      ],
      imgs: [
        {
          src: prezesMap[item.type],
          top: index == 2 ? "30px" : prizesTop,
          width: "30px",
          height: "30px"
        }
      ]
    };
  });
};

const fontSize = "12px";
const prizesTop = "45px";
const fontTop = "15px";
import coinsImg from "@/assets/active/icon5.png";
import aginImg from "@/assets/active/icon2.png";
import luckImg from "@/assets/active/icon1.png";
import { activeWheel } from "@/api/active";
const prizes = ref([
  {
    background: "#283130",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#b13020",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#3a7531",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#283130",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#b13020",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#3a7531",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#283130",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#b13020",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  },
  {
    background: "#3a7531",
    fonts: [
      { text: "x100", fontColor: "#fff", top: fontTop, fontSize: fontSize }
    ],
    imgs: [{ src: coinsImg, top: prizesTop, width: "30px", height: "30px" }]
  }
]);
import hj4 from "@/assets/active/by2.png";
import jp3 from "@/assets/active/jg3.png";
const blocks = ref([
  {
    padding: "28px",
    // background: "#869cfa",
    imgs: [{ src: hj4, width: "280px", height: "280px", top: "20px" }]
  }
]);

import jg4 from "@/assets/active/jg4.png";
const buttons = ref([
  {
    background: "#ff9a9a",
    radius: "30%",
    imgs: [{ src: jp3, width: "100px", height: "100px", top: "-50px" }]
  },
  {
    imgs: [{ src: jg4, width: "25px", height: "45px", top: "-150px" }]
  }
]);
const rewardData = ref({});
const prizeResultData = ref();
let shouldTogglePrize = false; // 初始化状态变量
const startCallback = () => {
  // 没有登录 或者 时间超时
  // 超时
  if (!main.isLogin || new Date(dataTime.end_time).getTime() < new Date().getTime()) {
    return;
  }
  // 如果上一次是再来一次 不需要校验幸运值是否足够 因为再来一次不需要
  if (prizeResultData.value) {
    // 不是再来一次 判断够不够 不够不执行
    if (prizeResultData.value.type !== 'again') {
      if (luckyValue.value < tab9Data.value[activeTypeShow.value - 1]?.luck_value) {
        ElMessage.warning(`${globalProperties.$t("page.wheel.tips")}`);
        return;
      }
    }
  }
  // 第一次进来
  else {
    if (luckyValue.value < tab9Data.value[activeTypeShow.value - 1]?.luck_value) {
      ElMessage.warning(`${globalProperties.$t("page.wheel.tips")}`);
      return;
    }
  }

  if (!main.isLogin) {
    main.showLoginLayer();
    return;
  }

  const reward_list = currentData.value;
  const active_type = activeTabs.value[activeTypeShow.value - 1].tab;
  const params = {
    active_type: active_type,
    brief: rewardData.value?.brief || ""
  };
  myLucky.value.play();

  activeWheel(params)
    .then(res => {
         // 设置状态变量
      shouldTogglePrize = res.errno === 0;
      console.log("activeWheel----res", res, res.errno, reward_list);
      if (res.errno == 0) {
        const index = reward_list.findIndex(item => item.key == res.data.key);
        prizeResultData.value = reward_list[index];
        rewardData.value = res.data;
        myLucky.value.stop(index);
        luckyValue.value = res.data.lucky;
        loadNoticeList();
      } else {
        setTimeout(() => {
          // 报错时，找到没有奖励的索引
          const index = reward_list.findIndex(item => item.type == "none");

          // 调用stop停止旋转并传递中奖索引
          myLucky.value.stop(index);
        }, 3000);
      }
    })
    .catch(err => {
       // 错误时更新状态变量
      shouldTogglePrize = false;
      setTimeout(() => {
        // 报错时，找到没有奖励的索引
        const index = reward_list.findIndex(item => item.type == "none");
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(index);
      }, 3000);
    });
};


const endCallback = prizes => {
  console.log("end", prizes);
  // 根据状态变量决定是否调用 prizeToggle
  if (shouldTogglePrize) {
    prizeToggle();
    // 重置状态变量
    shouldTogglePrize = false;
  } else {
    console.warn("No toggle action performed due to invalid state.");
  }
};

const income = ref({
  salary: 0,
  pension: 0,
  benefits: 0,
  other: 0
});

const expenses = ref({
  rent: 0,
  utilities: 0,
  loans: 0,
  other: 0
});

const totalIncome = computed(() => {
  return (
    income.value.salary +
    income.value.pension +
    income.value.benefits +
    income.value.other
  ).toFixed(2);
});

const totalExpenses = computed(() => {
  return (
    expenses.value.rent +
    expenses.value.utilities +
    expenses.value.loans +
    expenses.value.other
  ).toFixed(2);
});

const disposableIncome = computed(() => {
  return (totalIncome.value - totalExpenses.value).toFixed(2);
});

const validateInput = (type, field) => {
  if (type === "income") {
    if (income.value[field] < 0) {
      income.value[field] = 0;
    }
  } else if (type === "expenses") {
    if (expenses.value[field] < 0) {
      expenses.value[field] = 0;
    }
  }
};
const backPage = () => {
  router.go(-1);
};
const tabSelected = ref("");
const selectChange = () => {
  activeTab.value = tabSelected.value;
  let obj = phoneMenu.value.find(item => item.valueKey == tabSelected.value);
  if (obj.id) {
    clickActiveTab(obj);
  } else {
    clickCustomizeActiveTab(obj);
  }
};
import { menu } from "@/store/menu";
const menuStore = menu();

// CustomizeActiveData
const customizeActiveData = computed(() => {
  return menuStore.getCustomeMenu;
});

</script>
<style scoped lang="less">
.btnFlex {
  justify-content: space-around;
}
// 小于750px
@media (max-width: 600px) {
  .lucky-tip {
    flex-direction: column !important;
  }

  .van-notice-bar {
    width: 100% !important;
  }
  .btnFlex {
    flex-direction: column;
    .el-button {
      margin: 10px 0;
    }
  }
}

@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }

  .sidebar-2 {
    display: none !important;
  }

  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;
    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;
    display: block;

    .btn {
      width: 220px;
      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }

  .responsive-layout .content {
    // flex-grow: 1;
  }

  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}

.content {
  overflow: auto;

  table {
    min-width: 900px;
  }
}

.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  padding: 0.5rem;
  display: none;

  .btn {
    width: 220px;
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}

.sidebar-2 {
  display: block;
}

.active-tab {
  background-color: #2f4553;
}

.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}

.ipt-dark:hover {
  border-color: #557086;
}

.close-icon:hover {
  color: white;
}

.close-icon {
  font-size: 18px;
  color: #b1bad3;
}



h2,
h1 {
  color: #fff;
  margin-top: 0;
}

.box_w {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主要区域的背景颜色 */
:deep(.el-table) {
  background-color: #213743 !important;
}

.el-table__header-wrapper {
  background-color: #213743 !important;
}

/* 单元格的文本颜色 */
.el-table td {
  color: #606266;
}

/* 鼠标悬浮时的行背景颜色 */
.el-table tr:hover {
  background-color: #ebeef5;
}

.my-custom-table {
  /* 自定义样式 */
  background-color: #213743 !important;
}

/*  
// 表格部分样式
 // 最外层透明 */
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}

.el-table :deep(.el-table__cell) {
  padding: 18px 0;
}


:deep(.el-table) th,
:deep(.el-table) tr,
:deep(.el-table) td {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family:
    Source Han Sans CN Normal,
    Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}

/* // 设置表格行高度 */
:deep(.el-table__body) tr,
:deep(.el-table__body) td {
  padding: 0;
  height: 44px;
}

:deep(.el-table) tbody tr:hover>td {
  background: #213743 !important;
}

:deep(.el-table) tbody tr {
  pointer-events: none;
}

:deep(.el-table__row.warning-row) {
  background: #213743;
}

:deep(.el-table) .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img_auto {
  :deep(img) {
    width: auto;
    height: 100%;
  }
}

:deep(.el-select__wrapper) {
  background: #1a2c38;
}
:deep(.el-select__placeholder) {
  color: #fff;
}
</style>


<style lang="less">
.el-select__wrapper {
  border: 1px solid #426073;
  box-shadow: none !important;
}
//下拉框的背景色
.el-select-dropdown__item {
  background: #1f2937 !important;
}

//下拉框的链接小方块
.el-select-dropdown__item.is-active {
  background: #1f2937 !important;
}

//鼠标移动上去的选中色
.el-select-dropdown__item.hover,
//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: #1f2937 !important;
  border: 1px solid #426073 !important;
}

//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border-top: 1px solid #426073 !important;
}

.el-tag.el-tag--info {
  color: #fff;
  background: #1a2c38 !important;
}
.el-icon .el-tag__close {
  color: #fff !important;
}
.mySelectStyle.el-popper[data-popper-placement^="top"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border: 1px solid #1f2937 !important;
}

//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: #fff !important;
    background: #1475e1 !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #fff;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    color: #fff !important;
    background: #2a77c6 !important;
  }
}
</style>